<template>
  <!-- 订单详情页 -->
  <div>
    <el-button type="primary" @click="goback">退回</el-button>
    <div class="tablecss">
      <el-table :data="userDetails.orderLines" style="width: 100%">
        <!-- 订单项编号 -->
        <el-table-column prop="id" label="订单项编号" align="center">
        </el-table-column>
        <!-- 产品编号 -->
        <el-table-column prop="productId" label="产品编号" align="center">
        </el-table-column>
        <!-- 产品 -->
        <el-table-column prop="product.name" label="产品" align="center">
        </el-table-column>
        <!-- 产品图片 -->
        <el-table-column label="产品图片" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="right" effect="light">
              <div slot="content">
                <el-image
                  style="width: 150px; height: 150px"
                  :src="scope.row.product.photo"
                  fit="contain"
                ></el-image>
              </div>
              <el-image
                style="width: 40px; height: 40px"
                :src="scope.row.product.photo"
                fit="contain"
              ></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 单价 -->
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <span>￥ </span
            ><span style="color: #f56c6c; font-size: 20px">{{
              scope.row.price
            }}</span
            ><span> 元</span>
          </template>
        </el-table-column>
        <!-- 数量 -->
        <el-table-column prop="number" label="数量" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>订单基本信息</span>
              </div>
              <div class="text item">
                订单编号: <span> {{ userDetails.id }}</span>
              </div>
              <div class="text item">
                订单金额：<span>￥ </span
                ><span style="color: #f56c6c; font-size: 20px">{{
                  userDetails.total
                }}</span
                ><span> 元</span>
              </div>
              <div class="text item">
                下单时间：{{ turnTime(userDetails.orderTime) }}
              </div>
              <div class="text item">订单状态：{{ userDetails.status }}</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6" v-if="!(userDetails.employee == null)">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>接单者信息</span>
              </div>
              <div class="text item">
                接单者：<span> {{ userDetails.employee.username }}</span>
              </div>
              <div class="text item">
                接单者手机号：{{ userDetails.employee.telephone }}
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>下单者信息</span>
              </div>
              <div class="text item">
                下单者：<span> {{ userDetails.customer.username }}</span>
              </div>
              <div class="text item">
                下单者手机号：{{ userDetails.customer.telephone }}
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>雇主信息</span>
              </div>
              <div class="text item">
                雇主：<span> {{ userDetails.address.username }}</span>
              </div>
              <div class="text item">
                雇主手机号：{{ userDetails.address.telephone }}
              </div>
              <div class="text item">
                服务地址：{{
                  userDetails.address.city +
                  userDetails.address.area +
                  userDetails.address.address
                }}
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      // 用户订单详细信息
      userDetails: {},
      //
    };
  },
  computed: {},
  methods: {
    // 查询订单详细信息
    async orderDetails() {
      // id= $route.query.id;
      // 用户订单id
      let id = this.$route.query.id;
      let res = await get("/order/findById", { id });
      this.userDetails = res.data;
    },
    // 退回订单页面
    goback() {
      this.$router.go(-1);
    },
    turnTime(date) {
      //把时间戳转成时间日期 方法
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  created() {
    this.orderDetails();
  },
  mounted() {},
};
</script>
<style scoped>
/* 表单样式 */
.tablecss {
  margin-bottom: 40px;
}
.text {
  font-size: 18px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>